<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { formatAddress, fromWei } from '@/utils/format';
import { getSwapList } from "@/api"

export default defineComponent({
    props: {
        gameList: {
            type: Array,
            default: []
        },
    },
    setup() {
        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
        });
        const refreshing = ref(false);
        const loading = ref(false);
        const finished = ref(true);
        const list: any = ref([]);
        const onRefresh = () => {
            console.log("@!22")
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true
            onLoad();
        };
        const onLoad = async () => {
            const res = await getSwapList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(res.data.data.SwapList || []);
            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        return {
            open,
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            formatAddress,
            fromWei,
        };
    },
});
</script>
<template>
    <!-- 右侧弹出 -->
    <van-popup v-model:show="open" close-on-popstat position="right" closeable close-icon-position="top-left"
        close-icon="arrow-left" teleport="body" :style="{
            width: '100%', height: '100%', background: `rgba(246, 246, 246, 1)`
        }">
        <div class="title" @click="open = false">{{ $t('layout.exchangeLogs') }}</div>
        <div class="list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <div class="row" v-for="(item, index) in list" :key="index">
                        <div class="cell">
                            <div class="label">
                                {{ item.CreatedAt }}
                            </div>
                            <div class="reward">
                                <div class="USDF">{{ item.Amount1 }}{{ ['USDT', 'HF', 'USDH'][item.PairType] }}</div>
                                <div>></div>
                                <div class="USDH">{{ item.Amount2 }}{{ ['HF', 'USDT', 'USDT'][item.PairType] }}</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </van-popup>
</template>
<style lang="less" scoped>
.van-popup {

    padding: 0 15px;

    .title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 54px;
    }

    .list {
        padding: 15px;
        background: #FFFFFF;
        border-radius: 8px;

        .row {
            padding: 10px 0;
            border-bottom: 1px solid rgba(136, 136, 136, 0.1);

            .cell {
                display: flex;
                justify-content: space-between;

                .label {
                    font-size: 12px;
                    color: #1F2120;
                }


            }

            .reward {
                display: flex;
                font-size: 14px;
                font-weight: 500;

                div {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                }
            }

            .time {
                margin-top: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 12px;
                font-weight: 400;
                color: #888888;



                span {
                    color: #1F2120;
                }
            }
        }
    }


}
</style>